<template>
    <div class="m-hcity">
        <dl>
            <dt>热门城市:</dt>
            <dd v-for="item of hotCity" :key="item.id">{{item.name === '市辖区' ? item.province.replace('市','') : item.name.replace('市','')}}</dd>           
        </dl>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            hotCity: []
        }
    },
    async mounted() {
        let {status,data: {hots}} = await this.$axios.get('/geo/hotCity')
        if (status === 200) {
           this.hotCity = hots
        }
        // axios.get('/geo/hotCity').then((res) => {
        //     console.log(res)
        // })
    }
}
</script>

<style lang="scss">
    .m-hcity {
        width: 100%;
        height: 82px;
        border-bottom: 1px solid #E5E5E5;
        dl {
            display: flex;
            flex-direction: row;
        }
        dt {
             font-size: 16px;
             color: #333;
             font-weight: 500;
             margin: 30px 20px 0 0;
        }
        dd {
            margin: 30px 20px;
            color: #666;
            line-height: 22px;
            cursor: pointer;
            &:hover {
                color: #13D1BE;      
            }
        }
    }
</style>


